import {ZDragCommonMixin} from "@/plugins/z-dragxml/mixins";

/**
 * 适配老版本的组件 添加共用方法
 * @private
 * @param def
 * @param DRAG_EXPORT
 */
export function createZDragOldComponent(def, {DRAG_EXPORT}) {
  def.ZDragXmlCom = true
  def.DRAG_EXPORT = DRAG_EXPORT
  def.methods.DRAG_EXPORT = DRAG_EXPORT
  return def
}

/**
 * 创建zdrag组件template
 * @param content
 * @param attrs {string}
 * @param className {string}
 * @returns {string}
 */
export function createZDragTemplate(content = '', {
  attrs = '', className = ''} = {}) {
  return `
      <div class="z-dragxml-com ${className}"
      :class="[zdrag__state_cls()]"
       @mouseenter.stop="zdrag__onMouseEnter"
       ${attrs}
  >
<!--    {{uuid}}-->
    <z-cell-item v-bind="zdrag__form_config"
                 :label="zdrag__GET_CONFIG('ui.label', '')"
                 :desc="zdrag__GET_CONFIG('ui.desc', '')"
                 :ui="zdrag__GET_CONFIG('ui', {})"
                 :hidden-label="zdrag__GET_CONFIG('ui.hiddenLabel', false)"
    >
      ${content}
    </z-cell-item>
  </div>
  `
}

/**
 * 创建zdrag组件template
 * @param content
 * @param attrs {string}
 * @param className {string}
 * @returns {string}
 */
export function createZDragContainerTemplate(content = '', {
  attrs = '', className = ''} = {}) {
  return `
      <div class="z-dragxml-com ${className}"
      :class="[zdrag__state_cls()]"
       @mouseenter.stop="zdrag__onMouseEnter"
       ${attrs}
  >
<!--    {{uuid}}-->
    ${content}
  </div>
  `
}

export function css(strings, value, value2) {
  console.log(strings,value);
  return strings.join(' ')
}

export function removeZDragStyle(ele) {
  if (ele) {
    document.body.removeChild(ele)
  }
}

/**
 * 创建style
 * @param css {string}
 */
export function createZDragStyle(css = '', handleStyle) {
  console.log(css)
  let style = document.createElement('style');
  style.innerHTML = css;
  if (handleStyle) {
     handleStyle(style)
  }
  document.body.appendChild(style);
  return style
}

/**
 * 适配老版本的组件 添加共用方法
 * @private
 * @param name {String}  组件名
 * @param def {Object}  定义
 * @param DRAG_FIELD {Boolean}   判断是否是form field(如input)
 * @param DRAG_EXPORT {Function}     导出时候的默认值
 * @param DRAG_LABEL_XML {Function}    侧边栏上的icon
 * @param DRAG_CONFIG {Function}     配置文件
 * @param DRAG_DEFAULT_VAL {Function}  初始化的默认值
 * @param DRAG_GROUP  {String}
 * @param DRAG_UI_CONFIG
 * @param DRAG_PANEL_CLS
 */
export function createZDragComponentV2(name, def, {
  DRAG_FIELD = false, DRAG_EXPORT, DRAG_CONFIG, DRAG_LABEL_XML, DRAG_DEFAULT_VAL, DRAG_GROUP, DRAG_UI_CONFIG
} = {}) {
  // console.log(DRAG_FIELD, def)
  def.name = name
  def.ZDragXmlCom = true
  if (!def.methods) {
    def.methods = {}
  }
  def.DRAG_FIELD = DRAG_FIELD
  if (!Array.isArray(def.mixins)) {
    def.mixins = []
  }
  def.DRAG_GROUP = DRAG_GROUP
  def.DRAG_EXPORT = DRAG_EXPORT
  def.DRAG_LABEL_XML = function () {
    let obj = DRAG_LABEL_XML()
    if (typeof obj === 'string') {
      return obj
    }

    return `<div class="z-dragxml-row">
${obj.icon}
<div class="z-dragxml-label__name">${obj.name}</div>
</div>`
  }
  def.DRAG_DEFAULT_VAL = DRAG_DEFAULT_VAL
  def.methods.DRAG_EXPORT = DRAG_EXPORT
  def.methods.DRAG_CONFIG = DRAG_CONFIG
  def.DRAG_CONFIG  = DRAG_CONFIG
  def.DRAG_UI_CONFIG = DRAG_UI_CONFIG
  def.DRAG_DATASET = function (){
    return {
      columnMax: 1
    }
  }
  def.mixins = [
    {
      data() {
        return {
          id: ZY.rid(6),
          INIT_CONFIG: {
            type: 'string',
          },
        }
      }
    },
    ZDragCommonMixin
  ]
  def.DRAG_PANEL_CLS = 'panel__' + name
  return def
}

/**
 * 创建新版本组件的方法 参考custom
 * @param name
 * @param DRAG_GROUP
 * @param columnMax 最大可以支持放几个
 * @param DRAG_LABEL_XML {Function} 放xml
 * @param INIT_CONFIG {{}}
 * @param DRAG_UI_CONFIG {Function}
 * @param DRAG_EXPORT {Function}
 * @param DRAG_CONFIG {Function}
 */
export function createZDragComponent(name, {
  DRAG_GROUP,
  columnMax = 1,
  DRAG_LABEL_XML,
  INIT_CONFIG = {},
  DRAG_UI_CONFIG = () => {},
  DRAG_EXPORT = () => {},
  DRAG_CONFIG = () => {},
  DATA = () => {}
} = {}) {
  let id = ZY.rid(6);
  return {
    name: name,
    DRAG_GROUP: DRAG_GROUP,
    ZDragXmlCom: true,
    mixins: [
      ZDragCommonMixin
    ],
    DRAG_DATASET() {
      return {
        columnMax: columnMax
      }
    },
    DRAG_LABEL_XML() {
      return  DRAG_LABEL_XML()
    },
    data() {
      let s = DATA()
      return {
        id,
        ...s
      }
    },
    methods: {
      DRAG_CONFIG() {
        // let obj = CusRichText.CUS_EDITOR() ?? { props: {} }
        // Reflect.deleteProperty(obj.props, 'type')
        // return obj
        return DRAG_CONFIG ? DRAG_CONFIG() : {}
      },
      DRAG_UI_CONFIG() {
        return DRAG_UI_CONFIG ? DRAG_UI_CONFIG() : {}
      },
      DRAG_EXPORT() {
        return {
          INIT_CONFIG: INIT_CONFIG,
          ...DRAG_EXPORT(),
        }
      }
    }
  }
}
